<template>
    <div class="header">
        <img class="img" src="@/assets/img/top.png" width="100%" />
        <div class="dateTime flex-center">
            <div class="time">{{ time }}</div>
            <span class="line"></span>
            <div class="date">{{ date }}</div>
        </div>
        <div class="notice-area">
            <MyNotice />
        </div>
    </div>
</template>

<script>
import MyNotice from '@/components/MyNotice.vue'

export default {
    name: 'MyHeader',
    components: {
        MyNotice
    },
    data() {
        return {
            time: '',
            date: ''
        }
    },
    created() {
        this.updateTime()
        this.timer = setInterval(this.updateTime, 1000) // 每秒更新
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    methods: {
        updateTime() {
            const now = new Date()
            const year = now.getFullYear()
            const month = this.padZero(now.getMonth() + 1)
            const day = this.padZero(now.getDate())
            const weekDay = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'][now.getDay()]
            const hours = this.padZero(now.getHours())
            const minutes = this.padZero(now.getMinutes())
            const seconds = this.padZero(now.getSeconds())

            this.time = `${hours}:${minutes}:${seconds}`
            this.date = `${year}-${month}-${day} ${weekDay}`
        },
        padZero(n) {
            return n < 10 ? '0' + n : n
        }
    }

}
</script>

<style lang="less" scoped>
    .header{
        padding: 4px 8px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        .dateTime{
            color: #1FC6FF;
            position: absolute;
            left: 28px;
            top: 44%;
            transform: translate(0, -50%);
            font-weight: 400;
            .time{
                font-size: 16px;
            }
            .line{
                display: inline-block;
                width: 1px;
                height: 16px;
                background: #135280;
                margin: 0 15px;
            }
            .date{
                font-size: 12px;
            }
        }
        .notice-area{
            position: absolute;
            right: 80px;
            top: 50%;
            transform: translateY(-50%);
            width: 450px;
        }
    }
</style>